<template>
  <div>
    <data-card>
      <search-form :disabled="loading" @search="getRequestData({page:pagination.page,size:pagination.size})">
        <el-form-item label="手机号">
          <mobile-input :show-word-limit="false" class="app-width-p150" v-model.trim="where.phone"></mobile-input>
        </el-form-item>
        <el-form-item label="类型">
          <select-input clearable class="app-width-p150" v-model="where.template_id" :data="smstmp" value-key="KEY" label-key="DESCRIPTION"></select-input>
        </el-form-item>
        <el-form-item label="状态">
          <select-input clearable class="app-width-p150" v-model="where.status" :data="[{label:'成功',value:1},{label:'失败',value:0}]"></select-input>
        </el-form-item>
      </search-form>
    </data-card>
    <data-card title="短信发送记录" class="app-margin-top-interval">
      <template #right>
        <el-space>
          <el-button size="small" type="primary" @click="openSmsTemplate">短信模板</el-button>
          <el-button size="small" type="warning" @click="exportSmsLog">导出记录</el-button>
        </el-space>
      </template>

      <app-table height="calc(var(--ach) - 220px)" class="app-margin-top-interval" :columns :data="list" :loading :pagination>
        <template #phone="{ row }">
          <span v-copy>{{ row.phone }}</span>
        </template>
        <template #status="{ row }">
          <el-link type="success" v-if="row.status">[成功]</el-link>
          <el-link type="danger" v-else>[失败]</el-link>
        </template>
      </app-table>
    </data-card>
  </div>
</template>
<script setup lang="ts">
import {useHttpPagingResult} from "@/hooks/http";
import {getSmsSendLogApi, getSmsSendLogExpApi} from "@/apps/admin/api/system/sms";
import {defineAsyncComponent, ref, h} from "vue";
import {TableColumn} from "@/components/AppTable/TableType";
import {useSmsTemplate} from "@/apps/admin/view/system/sms/SmsHook";
import MobileInput from "@/components/Form/MobileInput.vue";
import {usePopupComponent} from "@/components/FunctionComponents";

/**
 * 筛选条件
 */
const where = ref({
  phone: '',
  status: '',
  template_id: ''
})

const {SmstmpMap, smstmp} = useSmsTemplate()

/**
 * 请求hook
 */
const {pagination, list, loading, getRequestData} = useHttpPagingResult(function (query) {
  return getSmsSendLogApi({...query, ...where.value})
})

/**
 * 表列配置
 */
const columns: TableColumn[] = [
  {prop: "id", label: "ID", width: 110, align: "center"},
  {prop: "phone", label: "手机号", width: 180},
  {prop: "driver", label: "短信服务商", width: 160},
  {
    prop: "template_id", label: "短信类型", width: 130, render(row: any) {
      return SmstmpMap.value[row.template_id] ? SmstmpMap.value[row.template_id] : ''
    }
  },
  {prop: "status", label: "状态", width: 100},
  {prop: "content", label: "内容", minWidth: 400, showOverflowTooltip: true},
  {prop: "send_at", label: "发送时间", type: "timestramp", width: 170}
]

/**
 * 导出短信日志
 */
function exportSmsLog() {
  getSmsSendLogExpApi({...where.value}).then(result => {
    if (result.code === 200) {
      window.open(result.data.url)
    }
  })
}

/**
 * 打开短信模板
 */
function openSmsTemplate() {
  usePopupComponent('短信模板', h(defineAsyncComponent((): any => import("./components/SmsTemplate.vue"))), '960px')
}
</script>